// 导入 react
import React from 'react'

/**
 * 非受控组件
 * 1. 在构造函数中调用 React.createRef() 创建一个 Refs 对象（DOM容器）
 * 2. 将 Refs 对象赋值给表单的 ref 属性，和表单元素关联。
 * 3. 同过Refs 对象.current.value API 拿到表单元素的值
 */

// 创建一个类组件

class App extends React.Component{

  constructor(props) {
    super(props)
    // 创建一个 Refs 对象
    this.txtRef = React.createRef()
  }
  
  render(){
    return (
      <div>
        {/* 和表单关联 */}
        <input type='text' ref={this.txtRef}></input>
        {/* 获取表单元素的值 */}
        <button onClick={() => console.log(this.txtRef.current.value)}>提交</button>
      </div>
    )
  }

}

// 别忘了导出组件
export default App